import React, { Children } from 'react'
import { withLogin, withUser } from '../utils/hoc'
import { Route, Redirect, Switch } from 'react-router-dom'
import {
	UserOutlined,
	LaptopOutlined,
	NotificationOutlined,
	BookOutlined,
	HomeOutlined,
	ControlOutlined,
	TeamOutlined,
	SecurityScanOutlined,
} from '@ant-design/icons'

import Interviews from './manage/goods'
import Users from './manage/users/list'
import { Layout, Menu, Breadcrumb, Row, Col, Button } from 'antd'
import { BankFilled, FileTextFilled, BulbFilled } from '@ant-design/icons'
import Home from './manage/Home'
import { connect } from 'react-redux'
import Other from './manage/other'

const { Header, Content, Footer, Sider } = Layout
const { SubMenu } = Menu

//redux实现
const mapStateToProps = function (state, ownProps) {
	console.log('mapStateToProps', state.userInfo, ownProps)
	return {
		// username:state.userInfo.username,
		// 模块化后
		username: state.userInfo.username,
	}
}
//返回一个函数
const mapDispatchToProps = function (dispatch, ownProps) {
	console.log('mapDispatchToProps', dispatch, ownProps)
	return {
		logout() {
			dispatch({ type: 'logout' })
			// actionCreate简化
			// dispatch(userAction.logout())
		},
	}
	// 使用bindActionCreators
	// return bindActionCreators(userAction, dispatch)
}

// function bindActionCreators(actions, dispatch) {
// 	//     const data = {}
// 	//     for(let key in actions){
// 	//         data[key] = function(){
// 	//             dispatch(actions[key](arguments))
// 	//         }
// 	//         // {login(){},logout(){}}
// 	//     }
// 	//     return data
// }
const pathName = {
	'/manage': '首页',
	'/goods': '小说管理',
	'/users': '用户管理',
	'/list': '列表',
	'/add': '添加',
	'/edit': '编辑',
	'/other': '其他',
}
@withLogin
@connect(mapStateToProps, mapDispatchToProps)
class Manage extends React.Component {
	state = {
		collapsed: false,
		data: [
			{
				path: '/home',
				text: '首页',
				icon: <BankFilled />,
			},
			{
				path: '/goods',
				text: '小说管理',
				icon: <FileTextFilled />,
				children: [
					{
						path: '/list',
						text: '小说列表',
					},
					{
						path: '/add',
						text: '上架小说',
					},
				],
			},
			{
				path: '/users',
				text: '用户管理',
				icon: <TeamOutlined />,
				children: [
					{
						path: '/list',
						text: '用户列表',
					},
				],
			},
			{
				path: '/other',
				text: '其他',
				icon: <BulbFilled />,
			},
		],
		breadcrumbRoutes: [],
	}
	// SignOut = () => {
	// 	// console.log(1)
	// 	localStorage.removeItem('userInfo')
	// 	this.props.history.push('/login')
	// }
	onCollapse = (collapsed) => {
		console.log(collapsed)
		this.setState({ collapsed })
	}
	changemenu = ({ item, key }) => {
		console.log(key)
		this.props.history.push(key)
	}
	initBreadCrumb = (location = this.props.location) => {
		console.log('listen', location)
		// "/manage/interview/list"
		// const paths = location.pathname.split(/(?<=\w)\/(?=\w)/)
		const paths = location.pathname.split(/\b(?=\/)/)
		const breadcrumbRoutes = paths.map((item) => {
			return {
				path: item,
				breadcrumbName: pathName[item],
			}
		})
		this.setState({
			// breadcrumb: paths,
			breadcrumbRoutes,
		})
	}
	componentDidMount() {
		this.initBreadCrumb()
		this.props.history.listen(this.initBreadCrumb)
	}
	render() {
		console.log('manage==', this.props)
		//从本地获取数据然后放到高阶组件里
		//解构
		// const username = this.props.userInfo.username
		// console.log(username)
		const baseurl = this.props.match.path
		const { collapsed, data, breadcrumbRoutes } = this.state
		const { logout, username, history } = this.props
		return (
			<div style={{ height: '100%' }}>
				<Header
					className="site-layout-background"
					style={{ color: '#fff', fontSize: 20, height: '60px' }}
				>
					<Row>
						<Col span={16}>
							<BookOutlined
								style={{
									verticalAlign: 'middle',
									marginRight: 5,
									fontSize: 40,
								}}
							/>
							红袖添香后台管理系统
						</Col>
						<Col
							span={8}
							style={{ textAlign: 'right', fontSize: 16 }}
						>
							{username}
							<Button
								type="link"
								onClick={() => {
									logout()
									history.push('/login')
								}}
							>
								退出
							</Button>
						</Col>
					</Row>
				</Header>
				<Layout style={{ height: 'calc(100% - 60px)' }}>
					<Sider
						width={200}
						collapsible
						collapsed={collapsed}
						onCollapse={this.onCollapse}
					>
						<Menu
							theme="dark"
							mode="inline"
							onClick={this.changemenu}
							// style={{ padding: '20px 0 0' }}
						>
							{data.map((item) => {
								if (item.children) {
									return (
										<SubMenu
											key={item.path}
											icon={item.icon}
											title={item.text}
										>
											{item.children.map((it) => {
												return (
													<Menu.Item
														key={
															baseurl +
															item.path +
															it.path
														}
													>
														{it.text}
													</Menu.Item>
												)
											})}
										</SubMenu>
									)
								} else {
									return (
										<Menu.Item
											key={baseurl + item.path}
											icon={item.icon}
										>
											{item.text}
										</Menu.Item>
									)
								}
							})}
						</Menu>
					</Sider>
					<Layout
						className="site-layout"
						// style={{ padding: '0 20px 50px' }}
					>
						<Content style={{ margin: '0 16px' }}>
							<Breadcrumb routes={breadcrumbRoutes}></Breadcrumb>
							<div
								className="site-layout-background"
								style={{ padding: 24, minHeight: 360 }}
							>
								<Switch>
									<Route
										path={baseurl + '/goods'}
										component={Interviews}
									></Route>
									<Route
										path={baseurl + '/users'}
										component={Users}
									></Route>
									<Route
										path={baseurl + '/home'}
										component={Home}
									></Route>
									<Route
										path={baseurl + '/other'}
										component={Other}
									></Route>
									<Redirect
										from={'/manage'}
										to={'/manage/home'}
									></Redirect>
								</Switch>
							</div>
						</Content>
					</Layout>
				</Layout>
			</div>
		)
	}
}
// Manage = withLogin(Manage)
// Manage = withUser(Manage)
export default Manage
